<template>
	<ul class="leftTab-block">
		<li v-for="(item,index) in tabList" :key="index"
		    :style="{'background-image':'url('+(activeIndex === index ? bgImg2 : bgImg1) + ')'}"
		    :class="{active:activeIndex === index}"
		    @click="topPath(item)">
			<div v-if="activeIndex === index" style="position:absolute; top: 22.8%; left:11.3%; width:77%; height:60%">
				<svg width="100%" height="100%">
					<rect id="shape" width="100%" height="100%"/>
				</svg>
			</div>
			{{ item.name }}
		</li>
	</ul>
</template>

<script>
export default {
	data() {
		return {
			activeIndex: Number(this.$route.query.tabIndex) || 0,
			tabList: [
				{name: '经济增长衡量指数', path: '/economic/indexMining?tabIndex=0'},
				{name: '消费需求弹性系数', path: '/economic/indexMining/consumerDemand?tabIndex=1'},
				{name: '投资弹性系数', path: '/economic/indexMining/investment?tabIndex=2'},
				{name: '居民消费价格指数', path: '/economic/indexMining/consumerPrice?tabIndex=3'},
				{name: '恩格尔系数', path: '/economic/indexMining/engelCoefficient?tabIndex=4'},
				{name: '经济健康度指数', path: '/economic/indexMining/healthIndex?tabIndex=5'},
				{name: '经济发展潜力指数', path: '/economic/indexMining/developmentPotential?tabIndex=6'},
			],
			bgImg1: require('../assets/images/jjtab.png'),
			bgImg2: require('../assets/images/jjtabactive.png'),
		}
	},
	methods: {
		topPath(item) {
			this.$router.push({path: item.path})
		}
	}
}
</script>

<style lang="scss" scoped>
.leftTab-block {
	width: 100%;
	height: 100%;

	#shape {
		stroke-width: 3px;
		fill: transparent;
		//stroke: #00ff3c;
		stroke: rgba(0,255,60,0.7);
		stroke-dasharray: 83 650;
		stroke-dashoffset: 0;
		-webkit-animation: draw 4s linear infinite;
		animation: draw 4s linear infinite;
	}

	@-webkit-keyframes draw {
		to {
			stroke-dashoffset: 733;
		}
	}

	@keyframes draw {
		to {
			stroke-dashoffset: 733;
		}
	}

	li {
		position:relative;
		vertical-align: middle;
		//width: 13.54vw;
		//height: 9.44vh;
		width:100%;
		height:14.28%;
		list-style: none;
		font-size: 1.1vw;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #37F9FF;
		text-align: center;
		background-size: 100% 100%;
		cursor: pointer;
		line-height: 13vh;
		transition: all .2s ease;
	}

	li.active {
		color: #3EE465
	}
}
</style>
